﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 自定义分页栏样式 */
        .layui-laypage {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

            .layui-laypage a,
            .layui-laypage span {
                margin: 0 5px;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border: 1px solid #e2e2e2;
                border-radius: 3px;
                cursor: pointer;
            }

                .layui-laypage a:hover {
                    color: #009688;
                }

            .layui-laypage.layui-laypage-curr {
                background-color: #009688;
                color: #fff;
            }

        /* 调整工具栏容器样式 */
        .layui-btn-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 调整下拉框宽度 */
        .layui-input-block select {
            width: 150px;
        }
    </style>
</head>

<body>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <!-- 第一个下拉框 -->
            <div class="layui-input-block">
                <select name="superAffiliation" id="superAffiliation1" lay-filter="superAffiliation1">
                    <option value="0">请选择</option>
                </select>
            </div>
            <!-- 第二个下拉框 -->
            <div class="layui-input-block">
                <select name="superAffiliation" id="superAffiliation2" lay-filter="superAffiliation2">
                    <option value="0">请选择</option>
                </select>
            </div>
            <button class="layui-btn layui-btn-sm" lay-event="search">查询</button>
        </div>
    </script>



    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'jquery', 'form'], function () {
            var table = layui.table,
                layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;

            // 表格渲染
            var tableIns = table.render({
                elem: '#test',
                url: '@ViewBag.BaseUrl/T5/Department/GetDepartment',
                page: true,
                request: { pageName: 'pageIndex', limitName: 'pageSize' },
                limit: 15,
                limits: [10, 15, 20],
                toolbar: '#toolbarDemo',
                cellMinWidth: 80,
                totalRow: true,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'deparId', fixed: 'left', width: 230, title: 'ID' },
                    { field: 'deparName', width: 230, title: '科室名称' },
                    { field: 'campusName', width: 230, title: '所属院区' },
                    { field: 'doctorlocation', width: 230, title: '科室位置' },
                    {
                        field: 'deparstate', width: 240, title: '科室状态', templet: function (d) {
                            return d.deparstate ? '待客' : '不待客';
                        }
                    },
                    { fixed: 'right', title: '操作', width: 240, templet: '#toolDemo' }
                ]],
                done: function (res, curr, count) {
                    // 检查接口返回数据，若有问题则提示
                    if (!res || res.code !== 0) {
                        layer.msg('接口数据获取失败，请检查接口或网络', { icon: 5 });
                        return;
                    }
                }
            });

            // 工具栏事件
            table.on('toolbar(test)', function (obj) {
                if (obj.event === 'getCheckData') {
                    var checkStatus = table.checkStatus(obj.config.id);
                    layer.alert(JSON.stringify(checkStatus.data, null, 2));
                } else if (obj.event === 'search') {
                    var selectedValue = $('#superAffiliation2').val();
                    if (selectedValue === '0') {
                        selectedValue = $('#superAffiliation1').val();
                    }
                    // 如果没有选择，加载全部数据
                    if (selectedValue === '0') {
                        tableIns.reload({
                            where: {},
                            page: {
                                curr: 1
                            }
                        });
                    } else {
                        tableIns.reload({
                            where: {
                                deparId: selectedValue
                            },
                            page: {
                                curr: 1
                            }
                        });
                    }
                    // 刷新下拉框
                    loadDepartments(null, '#superAffiliation1');
                } else if (obj.event === 'reset') { // 处理重置按钮点击事件
                    var $select1 = $('#superAffiliation1');
                    var $select2 = $('#superAffiliation2');
                    $select1.find('option:not(:first)').remove();
                    $select2.find('option:not(:first)').remove();
                    form.render('select');
                    // 重新加载第一个下拉框数据
                    loadDepartments(null, '#superAffiliation1');
                }
            });

            // 优化后的分页处理（移除冗余的reload调用，Layui自动处理分页）
            table.on('page(test)', function (obj) {
                console.log('当前页：', obj.curr, '每页数量：', obj.limit);
            });

            function loadDepartments(parentId, selector) {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/Department/CascadeDepartment`,
                    success: function (res) {
                        var $select = $(selector);
                        $select.find('option:not(:first)').remove();
                        res.data.forEach(item => {
                            $select.append(`<option value="${item.deparId}">${item.deparName}</option>`);
                        });
                        form.render('select');
                    }
                });
            }

            // 调用 loadDepartments 函数填充第一个下拉框
            loadDepartments(null, '#superAffiliation1');

            function loadDepartments2(parentId, selector) {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/Department/ChildDepartment?DeparId=${parentId}`,
                    success: function (res) {
                        var $select = $(selector);
                        $select.find('option:not(:first)').remove();
                        res.data.forEach(item => {
                            $select.append(`<option value="${item.deparId}">${item.deparName}</option>`);
                        });
                        form.render('select');
                    }
                });
            }

            // 监听第一个下拉框的选择变化
            form.on('select(superAffiliation1)', function (data) {
                var selectedValue = data.value;
                if (selectedValue !== '0') {
                    loadDepartments2(selectedValue, '#superAffiliation2');
                } else {
                    // 如果选择了请选择，清空第二个下拉框
                    var $select = $('#superAffiliation2');
                    $select.find('option:not(:first)').remove();
                    form.render('select');
                }
            });
        });

        // 检查 Layui 资源是否加载成功
        if (!layui || !layui.table || !layui.layer || !layui.jquery) {
            console.error('Layui 资源加载失败，请检查网络或资源路径');
        }
    </script>
</body>

</html>    